<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link media="all" rel="stylesheet" th:href="@{/back/lib/layui-v2.6.3/css/layui.css}">
    <link media="all" rel="stylesheet" th:href="@{/back/css/public.css}">
    <!--    zyupload上传实例-->
    <link rel="stylesheet" th:href="@{/back/lib/jq-module/zyupload/zyupload-1.0.0.min.css}" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <!--    修改使用的用户ID-->
    <input hidden="hidden" name="id" th:value="${club.id}">
    <div class="layui-form-item">
        <label class="layui-form-label">社团名称</label>
        <div class="layui-input-block">
            <input class="layui-input" name="clubName" placeholder="社团名称" th:value="${club.clubName}" type="text"
                   disabled="disabled" style="background:#CCCCCC">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">社团级别</label>
        <div class="layui-input-block">
            <input class="layui-input" name="level" placeholder="社团级别" th:value="${club.level}" type="number"
                   disabled="disabled" style="background:#CCCCCC">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">社团风采</label>
        <div class="layui-input-block">
            <input class="layui-input" name="clubStyle" placeholder="请输入社团风采" th:value="${club.clubStyle}"
                   type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">社团招新</label>
        <div class="layui-input-block">
            <input class="layui-input" name="clubRecruitment" placeholder="请输入社团招新"
                   th:value="${club.clubRecruitment}" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系我们</label>
        <div class="layui-input-block">
            <input class="layui-input" name="contactUs" placeholder="" th:value="${club.contactUs}" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">社团创建者</label>
        <div class="layui-input-block">
            <input class="layui-input" name="Founder" placeholder="社团创建者" th:value="${club.founder}" type="number"
                   disabled="disabled" style="background:#CCCCCC">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">社团logo</label>
        <div class="layui-input-block">
            <input class="layui-input" name="logoUrl" id="logoUrl" placeholder="请输入社团logo"
                   th:value="${club.logoUrl}" type="text"
                   disabled="disabled" style="background:#CCCCCC">
            <!--            实现图片文件上传-->
            <div style="float:left; "><img style="height: 200px;"
                                           th:src="@{/back/images/{filename}(filename=${club.logoUrl})}" alt=""></div>
            <div style="float:left;" id="zyupload" class="zyupload"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-filter="saveBtn" lay-submit>确认保存</button>
        </div>
    </div>
</div>

<script charset="utf-8" th:src="@{/back/lib/layui-v2.6.3/layui.js}"></script>
<!--zyupload上传实例-->
<script th:src="@{/back/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/back/lib/jq-module/zyupload/zyupload-1.0.0.min.js}" charset="utf-8"></script>

<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                $.ajax("/back-club/update", {
                    data: data.field,
                    type: "POST",
                    dataType: "JSON",
                    success: function (result) {
                        console.log(data)
                        if (result.code == 0) {
                            // 关闭弹出层
                            layer.close(index);
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                            window.parent.location.reload();//父窗口刷新
                        }
                    },
                })
            });
            return false;
        });
    });
</script>

<!--zyupload上传实例-->
<script type="text/javascript">
    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "650px",                 // 宽度
            height: "240px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "/page/api/upload",  // 上传文件的路径
            fileType: ["jpg", "jpeg", "png", "txt", "exe", "doc", "docx"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: false,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: true,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                console.info("此文件上传到服务器地址：");
                console.info(response);
                //切割字符串
                let parts = response.split("\\"); // 使用"-"作为分隔符来切割字符串
                $("#logoUrl").val(parts[parts.length - 1]);
                $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });
    });
</script>
</body>
</html>